<template>
    <div class="landing">
        <div class="nav">
            <router-link to='/'><div class="b-nav-btn">
                <i class="fa fa-home"></i> 返回首页
            </div></router-link>
        </div>
        <div class = 'title'>登陆页</div>
        <div class="input-list">
            <span  class="input-title">用户名：</span> 
            <input v-model="userName" type="text">
        </div>
        <div class="input-list">
            <span class="input-title">密码：</span> 
            <input v-model="passW" type="text">
        </div>
        <div @click="landDo" class="btn">登陆</div>
        <div class="my-alert" ref='alert_text'> 空 </div>
    </div>
</template>

<script>
export default {
    name: 'signIn',
    data() {
        return {
            userName: 'admin',
            passW: '123456',
            alert_time: 35, // 提示弹窗消失速度
            alert_timer: null, // 提示弹窗的计时器 
            goNext: '/',
            goQuery: {},
        }
    },
    methods: {
        landDo() {
            this.$axios.get('./static/land.json').then((success)=>{
                if(success.data[this.userName]!=undefined && this.passW == success.data[this.userName].pass){
                    // console.log("very ok");
                    this.$mycookie.setCookie('un',this.userName,10000);
                    this.$router.push({path:this.goNext, query: this.goQuery});
                }else {
                    this.myalert('用户名或密码错误')
                }
            },(err)=> {
                console.log(err);
            })
        },
        myalert(str) {
            let alert_dom = this.$refs.alert_text;
            alert_dom.innerHTML = str;
            alert_dom.style.display = 'block';
            alert_dom.style.opacity = 0.9;
            if(this.alert_timer != null) {
                clearInterval(this.alert_timer);
                this.alert_timer = null;
            }
            this.alert_timer = setInterval(() => {
                alert_dom.style.opacity -= 0.02;
                if(alert_dom.style.opacity < 0.0001){
                    clearInterval(this.alert_timer);
                    this.alert_timer = null;
                    alert_dom.style.display = 'none';
                }
            }, this.alert_time);
        },
    },
    beforeRouteEnter(to,from,next) {
        // console.log(to,from);
        next((_this)=>{
            _this.goNext = from.path;
            _this.goQuery = from.query;
        });
    }
}
</script>

<style lang="scss" scoped>
.landing {
    font-size: 20px;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    &> div {
        margin-bottom: 15px;
    }
    .title {
        font-weight: bold;
    }
    .btn {
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #eee;
        color: #333;
    } 
}
.my-alert {
    font-size: 20px;
    background-color: black;
    color: white;
    padding: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    display: none;
    opacity: 0.8;
}
</style>
